<template>
  <div class="refine_fblist">
    <h2 class="titleblue">反馈信息列表</h2>
    <div class="contant">
      <el-row :gutter="20">
        <el-col :span="6" class="fr">
          <div class="grid-content">

            <el-input prefix-icon="el-icon-search" v-if="plantabs=='first'" placeholder="搜索反馈" @clear="search" clearable v-model="needSearch"
                      class="plansearch" @change="search">
              <span slot="append">搜索</span>
            </el-input>
            <el-input prefix-icon="el-icon-search" v-if="plantabs=='second'" placeholder="搜索历史反馈" @clear="search" clearable v-model="needSearch"
                      class="plansearch" @change="search">
              <span slot="append">搜索</span>
            </el-input>
          </div>
        </el-col>
      </el-row>

      <el-tabs v-model="plantabs" type="card" @tab-click="handleClick">
        <el-tab-pane label="待确认反馈列表" name="first">
          <data-table :page='currentPage' :head="thead1" :data="tableData1" :actions="['confirm','view','del']"
                      @callback="dataAction"></data-table>
        </el-tab-pane>
        <el-tab-pane label="历史反馈列表" name="second">
          <data-table :page='currentPage1' :head="thead2" :data="tableData2" :actions="['view','del']"
                      @callback="dataAction"></data-table>
        </el-tab-pane>
      </el-tabs>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          layout="total,prev, pager, next, jumper"
          :total="totalPage1"
          background
          v-if="plantabs=='first'">
        </el-pagination>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange1"
          :current-page.sync="currentPage1"

          layout="total,prev, pager, next, jumper"
          :total="totalPage2"
          background
          v-if="plantabs=='second'">
        </el-pagination>
      </div>
    </div>
    <el-dialog title="" :visible.sync="adddialog" width="80%" append-to-body @close="close">
      <div class="refine_fbdetail">
        <h2 class="titleblue">反馈信息详情</h2>
        <div class="contant">
          <el-form :inline="true" :model="boradinfo" label-width="120px" class="demo-form-inline">
            <el-row :gutter="24">
              <el-form-item label="反馈人">
                <div class="inputdiv">{{boradinfo.userName}}</div>
              </el-form-item>
              <el-form-item label="反馈时间">
                <div class="inputdiv">{{boradinfo.feedbackTime}}</div>
              </el-form-item>
            </el-row>
            <el-row :gutter="24">
              <el-form-item label="错误信息详情">
                <div class="txt">{{boradinfo.description}}</div>
              </el-form-item>
            </el-row>
            <el-row :gutter="24" v-if="img.length!=0">
              <el-form-item label="附件">
                <a class="annex-div" v-for='(item,index) in img' target='_blank' :href="item.url" download="">
                  <img :src="item.url" alt="">
                </a>
              </el-form-item>
            </el-row>

          </el-form>
          <el-row :gutter="24" class="footerbtn">
            <el-button type="primary" @click="last()" class="sure">上一条</el-button>
            <el-button type="primary" @click="next()" class="sure">下一条</el-button>
          </el-row>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import DataTable from '@/components/common/DataTable.vue'
  import feedbackService from '@/services/FeedbackService'
  export default {
    components: {
      'data-table': DataTable
    },
    data: function () {
      return {
        needSearch:'',
        member:{},
        plantabs: 'first',
        type:'',
        thead1: [
          {
            name: "反馈人",
            prop: "userName",
            width: "200"
          },
          {
            name: "反馈人姓名",
            prop: "fullName",
            width: "200"
          },
          {
            name: "反馈内容",
            prop: "description"
          },
          // {name:"附件",prop:"annex"},
          {
            name: "反馈时间",
            prop: "feedbackTime",
            width: "200"
          },
        ],
        thead2: [
          {
            name: "反馈人",
            prop: "userName",
            width: "100"
          },
          {
            name: "反馈人姓名",
            prop: "fullName",
            width: "200"
          },
          {
            name: "反馈内容",
            prop: "description"
          },
          // {name:"附件",prop:"annex"},
          {
            name: "反馈时间",
            prop: "feedbackTime",
            width: "200"
          },
        ],
        tableData1: [],
        tableData2: [],
        currentPage: 1,
        currentPage1: 1,
        adddialog: false,
        totalPage1: 0,
        totalPage2: 0,
        img:[],
        boradinfo:{},
      };
    },
    created() {
      this.getData();
    },

    methods: {
      submit: function () {
      },
      dataAction(param) {
        if(param.action === "confirm"){
          this.$confirm('您确定要执行确认操作吗？', '', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            center: true
          }).then((res) => {
            let params = this.oldData[param.data.index];
            params.type = 1;
            feedbackService.update(params).then(()=>{
              this.$alert("成功", '提示');
              this.getData();
            })
          })
        }
        if (param.action === "view") {
          this.adddialog = true;
          let currentPage;
          if(this.plantabs === 'first'){
            currentPage = this.currentPage;
          }else{
            currentPage = this.currentPage1;
          }
          this.$router.push({ path: "/feedback-list", query: { type: 'look', id: param.data.id,index:param.data.index,pageNum:currentPage,searchUrl:this.searchUrl} })
          this.lookGetData();
        }
        if (param.action === "del"){
          this.$confirm('您确定要执行删除操作吗？', '', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            center: true
          }).then((res) => {
            feedbackService.delete(param.data.id).then(()=>{
              this.$alert("删除成功", '提示');
              this.getData();
            })
          })
        }
      },
      lookGetData(str,page){
        this.img=[];
        if(page===undefined){
          this.page = (10*parseInt(this.$route.query.pageNum-1))+parseInt(this.$route.query.index);
        }
        feedbackService.ownSearch({size: 1, page: this.page,query:this.$route.query.searchUrl}).then((res)=>{
          if(res.data.length===0){
            this.$alert(str);
            if(str==='没有下一篇了'){
              this.$alert('没有下一篇了');
              this.page-=1;
              this.lookGetData('没有下一篇了',this.page);
            }
          }
          this.boradinfo = res.data[0];
          this.boradinfo.userName = res.data[0].sysUser.username;
          this.boradinfo.feedbackTime = this.$m(res.data[0].feedbackTime).format('YYYY-MM-DD HH:mm:ss');
          this.img = JSON.parse(res.data[0].url);
        });
      },
      handleClick(tab, event) {
        this.getData();

      },
      handleSizeChange(val) {
        this.getData();
      },
      handleCurrentChange(val) {
        this.getData();
      },
      handleCurrentChange1(val) {
        this.getData();
      },
      close() {
        this.adddialog = false;
      },
      close1() {
        this.adddialog = false;
        this.$router.go(-1)
      },
      getData() {
        let searchUrl = '';
        let currentPage;
        if (this.plantabs === 'first') {
          searchUrl = 'type==2;';
          currentPage = this.currentPage-1;
        } else {
          searchUrl = 'type==1;';
          currentPage = this.currentPage1-1;
        }
        if(this.needSearch){
          searchUrl = (searchUrl?searchUrl:'')+'description=like='+this.needSearch+';';
        }
        this.searchUrl = searchUrl;
        feedbackService.ownSearch({size: 10, page:currentPage,query:searchUrl}).then((res)=>{
          this.oldData = JSON.parse(JSON.stringify(res.data));
          if (this.plantabs == 'first') {
            this.tableData1 = res.data;
            this.tableData1.forEach((item,i)=>{
              item.index = i;
              let feedbackTime = item.feedbackTime;
              item.feedbackTime = feedbackTime?this.$m(feedbackTime).format('YYYY-MM-DD HH:mm:ss'):'';
              item.userName = item.sysUser.username;
              item.fullName = item.sysUser.fullname;
            });
            this.totalPage1 = parseInt(res.headers['x-total-count'])
          } else {
            this.tableData2 = res.data;
            this.tableData2.forEach((item,i)=>{
              item.index = i;
              let feedbackTime = item.feedbackTime;
              item.feedbackTime = feedbackTime?this.$m(feedbackTime).format('YYYY-MM-DD HH:mm:ss'):'';
              item.userName = item.sysUser.username;
              item.fullName = item.sysUser.fullname;
            });
            this.totalPage2 = parseInt(res.headers['x-total-count'])
          }
        });
      },
      update() {
        this.adddialog = false;
        this.getData()
      },
      search() {
        this.currentPage = 1
        this.currentPage1 = 1
        this.getData();
      },
      clear() {
        this.search();
      },
      next(){
        this.page=this.page+1;
        this.lookGetData('没有下一篇了',this.page);
      },
      last(){
        this.page=this.page-1;
        if(this.page<0){
          this.$alert('没有上一篇了');
          this.page=this.page+1;
          //this.lookGetData();
        }else{
          this.lookGetData('没有上一篇了',this.page);
        }
      }
    }
  };
</script>

<style lang="scss">
  .refine_fblist {
    width:100%;
    display: inline-block;
    .plansearch{
      float: right;
      width:310px;
    }
    .plansearch input{
      width:230px;
      margin-right:10px;
      border-radius:0px;
    }
    .plansearch .el-input-group__append {
      border-left: 1px;
      width: 56px;
      background-color: #0062cd;
      border-radius: 2px;
      font-size: 14px;
      color: #ffffff;
    }
    .el-table tr:nth-child(2n){
      background:#FAFAFA
    }
  }
  .refine_fbdetail {
    width:100%;
    display:inline-block;
    .width-100{
      width:100%;
    }
    .inputdiv{
      width: 326px;
      border-radius: 2px;
      border: solid 1px #dddddd;
      color:#666666;
      padding: 0 15px;
      height:40px;
    }
    .txt{
      width: 600px;
      height: 70px;
      border-radius: 2px;
      border: solid 1px #dddddd;
      padding: 0 15px;
      color:#666666;
    }
    .el-form img{
      width: 62px;
      height: 64px;
      background-color: #f5f5f5;
      border-radius: 2px;
      border: solid 1px #dddddd;
      float: left;
      margin-right:10px;
    }
    .footerbtn{
      text-align: center;
      margin:30px 0 120px 0;
      width:100%;
    }
  }
</style>
